import { Drawer, Button, Tabs, Row, Col, Menu, Descriptions, Spin, Empty } from 'antd';
import React, { useState, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import TreeControlled from '@/components/blocks/TreeControlled';
import styles from './Detail.less';
import { getUserDetail, findRoleByUserId } from '../service';

const { TabPane } = Tabs;

const Detail = function Detail({ onClose, visible, current, onOption }) {
  const [currentRole, setCurrentRole] = useState('');
  const [subRoleTree, setSubRoleTree] = useState([]);

  const { data: roleTree = [], loading: roleTreeLoading } = useRequest(
    () => findRoleByUserId({ userId: current.id }),
    {
      refreshDeps: [current.id],
      onSuccess(res = []) {
        if (res.length > 0) {
          setCurrentRole(res[0].key);
        }
      },
    },
  );

  useEffect(() => {
    if (currentRole) {
      let tempRoleTree = roleTree.find(item => item.key === currentRole).children || [];
      let tempArr = [];
      for (const item of tempRoleTree) {
        if (item.children) {
          tempArr.push(item);
        }
      }
      setSubRoleTree(tempArr);
    }
  }, [currentRole, roleTree]);
  const roleInfo = currentUser =>
    subRoleTree.length > 0 ? (
      <Row type="flex" gutter={8}>
        <Col span={10} style={{ minHeight: 100 }}>
          <Menu
            theme="light"
            selectedKeys={[currentRole]}
            onClick={({ key }) => setCurrentRole(key)}
            mode="inline"
          >
            {roleTree.map(item => (
              <Menu.Item key={item.key} title={item.title}>
                {item.title}
              </Menu.Item>
            ))}
          </Menu>
        </Col>
        <Col span={14}>
          <Spin spinning={roleTreeLoading}>
            <TreeControlled data={subRoleTree} />
          </Spin>
        </Col>
      </Row>
    ) : (
      <Empty description="还未分配角色" />
    );

  const renderUserInfo = currentUser => (
    <div className={styles.detail}>
      <Tabs>
        <TabPane tab="基本信息" key="1">
          <Descriptions column={1}>
            <Descriptions.Item label="工号">{currentUser.userId}</Descriptions.Item>
            <Descriptions.Item label="联系电话">{currentUser.tuMobile}</Descriptions.Item>
            <Descriptions.Item label="邮箱地址">{currentUser.tuEmail}</Descriptions.Item>
            <Descriptions.Item label="出生日期">{currentUser.tuBdate}</Descriptions.Item>
            <Descriptions.Item label="工作航站">{currentUser.airport}</Descriptions.Item>
            <Descriptions.Item label="用户状态">{currentUser.userState}</Descriptions.Item>
            <Descriptions.Item label="上次登录时间">{currentUser.loginDate}</Descriptions.Item>
            <Descriptions.Item label="最后修改时间">{currentUser.modifiDate}</Descriptions.Item>
            <Descriptions.Item label="最后修改人">{currentUser.modifiUser}</Descriptions.Item>
          </Descriptions>
        </TabPane>
        <TabPane tab="角色信息" key="2">
          {roleInfo(currentUser)}
        </TabPane>
      </Tabs>
    </div>
  );

  const { data: currentUser = {}, loading: currentUserLoading } = useRequest(
    () => getUserDetail({ userId: current.id }),
    {
      refreshDeps: [current.id],
    },
  );
  const dataLoading = currentUserLoading || !(currentUser && Object.keys(currentUser).length);

  return (
    <Drawer
      title={false}
      placement="right"
      onClose={onClose}
      visible={visible}
      width={500}
      bodyStyle={{ paddingBottom: 80 }}
    >
      {!dataLoading && (
        <div>
          <div className={styles.avatarHolder}>
            <img alt="" src={`data:image/png;base64,${currentUser.photo}`} />
            <div className={styles.name}>{currentUser.tuCname}</div>
            <div>{currentUser.deptName}</div>
          </div>
          {renderUserInfo(currentUser)}
        </div>
      )}
      <div className={styles.drawerBottom}>
        <Button onClick={() => onOption('reset', current)} style={{ marginRight: 8 }}>
          重置密码
        </Button>
        <Button onClick={() => onOption('unlock', current)} type="primary">
          解锁
        </Button>
      </div>
    </Drawer>
  );
};

export default Detail;
